<template>
  <view>
    <view class="piker-img">
      <image style="width: 100%;height: 100%;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/mine1logo_4.png"></image>
    </view>
    <view class="picker-person">
      <view style="padding-left: 48rpx;">
        
        <view class="picker-person-p">
          <view style="width: 48rpx;height: 21rpx;border-bottom: 2px solid rgba(51, 51, 51, 0.5);"></view>
          <view style="margin-left: 12rpx;">请选择您的身份</view>
          <view style="width: 48rpx;height: 22rpx;border-bottom: 2px solid rgba(51, 51, 51, 0.5);margin-left: 12rpx;"></view>
        </view>
        <view style="width: 654rpx;">
          <view v-if="picker == 0 || picker == 2" style="margin-top: 36rpx;" @click="picker = 1">
            <image style="height: 220rpx;width: 100%;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/loginlogo_3.png"></image>
          </view>
          <view v-else-if="picker == 1" style="margin-top: 36rpx;" @click="picker = 0">
            <image style="height: 220rpx;width: 100%;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/loginlogo_5.png"></image>
          </view>
          <view v-if="picker == 0 || picker == 1" style="margin-top: 52rpx;" @click="picker = 2">
            <image style="height: 220rpx;width: 100%;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/loginlogo_4.png"></image>
          </view>
          <view v-else-if="picker == 2" style="margin-top: 52rpx;" @click="picker = 0">
            <image style="height: 220rpx;width: 100%;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/loginlogo_6.png"></image>
          </view>
        </view>
      </view>
      <view style="margin-top: 56rpx;">
        <button open-type="getPhoneNumber" class="ok-btn" @getphonenumber="pickIdentity">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {getSession,wxLogin,getUser} from '@/api/global'
  import WXBizDataCrypt from "@/utils/WXBizDataCrypt";
  export default {
    data() {
      return {
        picker:0,
        jsCode:"",
        phone:"",
        session_key:"",
        appid:"wx0fc235e3f74a9e1c",
        img:"",
        user:{}
      }
    },
    mounted() {
      var that = this;
      console.log("运行过");
      that.getCode();
    },
    methods: {
      pickIdentity:function(e){
        var that = this;
        that.getCode(e);
      },
      getCode:function(e) {
        var that = this;
        uni.login({
          success:function(res){
            if(res.code){
              console.log(res.code)
              that.jsCode = res.code;
              that.login(e);
            }else {
              console.log("登录失败");
            }
          }
        })
      },
      login:function(e) {
        var that = this;
        wxLogin({code:that.jsCode,type:that.picker,phone:that.phone,headImg:that.img})
          .then(response => {
            var _data = response[1].data;
            that.session_key = _data.data.session;
            console.log(_data)
            if(_data.status == 500 && typeof e != 'undefined') {
              that.getPhone(e)
              // console.log(e)
            }else if(_data.status == 200) {
              uni.setStorageSync("token",_data.data.token);
              that.userInfo();
            } else {
              that.getUserInfo();
              
            }
          })
          .catch(error => {
            console.log(error);
          })
      },
      userInfo:function() {
        var that = this;
        //通过后端获取用户信息
        getUser({}).then(response => {
          // console.log(response)
          var _data = response[1].data;
          if(_data.status == 200) {
            var user = {
              headimg:that.img,
              name:that.phone,
              phone:that.phone
            };
            // console.log(user);
            //缓存个人信息
            uni.setStorageSync('user',user);
            
            that.$emit('setShow');
          }
        })
      },
      getPhone:function(e) {
        console.log(e);
        var that = this;
        
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权
          console.log("cuowu")
        }else{      //允许授权  
          let pc = new WXBizDataCrypt(that.appid,that.session_key);
          let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);
          that.phone = data.phoneNumber;
          that.getCode(e);
        }  
      },
      getUserInfo:function(e) {
        var that = this;
        uni.showModal({
          title:'提示',
          content:'是否允许小程序获取基本信息',
          cancelText:'否',
          confirmText:'是',
          success: (res) => {
            if(res.confirm) {
              uni.getUserProfile({
                desc:"获取用户信息",
                success:function(res){
                  console.log(res)
                  let pc = new WXBizDataCrypt(that.appid,that.session_key);
                  let user = pc.decryptData(res.encryptedData,res.iv);
                  that.img = user.avatarUrl;
                  console.log(user);
                },
                fail: (error) => {
                  console.log(error)
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mid-main {
    height: 100%;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .piker-img {
    background-color: #D8D8D8;
    height: 750rpx;
  }
  .picker-person {
    background-color: white;
    height: 922rpx;
    width: 100%;
    position: absolute;
    top: 484rpx;
    border-radius: 16rpx 16rpx 0 0;
    
  }
  .picker-person-p {
    width: 654rpx;
    display: flex;
    height: 44rpx;
    margin-top: 64rpx;
    justify-content: center;
    color: rgba(51, 51, 51, 0.5);
    font-weight: Regular;
    font-size: 32rpx;
  }
  
  .ok-btn {
    background-color: rgba(250, 140, 22, 1);
    width: 720rpx;
    color: white;
    letter-spacing: 10rpx;
    height: 94rpx;
    line-height: 94rpx;
    font-size: 36rpx;
  }
</style>
